<template>
    <view class="content" :class="['content-page-' + game.theme]" @tap="palyClickAudio"
	:style="game.bg?'--content-bg:url('+game.bg+');':''">
        <view class="rule-position" v-if="game.rule_content">
            <view class="h8 font-weight-600 text-center mb-4">游戏规则</view>
            <text class="h9 py-1">{{game.rule_content}}</text>
        </view>
        <view class="dice-position flex grid-gap-6" @click="getRounded">
            <view class="dice" :class="['rotate-' + actionNum]">
                <view class="box" :class="['action-' + index]" v-for="(item, index) in BODY_ACTION" :key="index">{{
                    item.content }}
                </view>
            </view>
            <view class="dice" :class="['rotate-' + partsNum]">
                <view class="box" :class="['parts-' + index]" v-for="(item, index) in BODY_PARTS" :key="index">{{
                    item.content }}</view>
            </view>
        </view>
        <toggle-sound @change="stopMusic" />
        <view class="btn-position flex grid-gap-4 flex-center">
            <view class="bg-danger text-white rounded-4 px-6 py-2 font-weight-600 text-center h8"
                hover-class="bg-danger-dark-1" @click="close(true)">结束游戏</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { $http, $page, useGameCustom, createAudio } from '@/utils';
const game = ref<any>({
    theme: '',
    bg: '',
    rule_content:"1.每个人轮流掷骰子\n2.两个骰子内容组成任务内容\n3.点击骰子开始游戏"
});
const BODY_ACTION = ref<{
    content: string;
    nature_text?: string;
    action?: string;
    icon?: string;
    style?: any;
}[]>([]);
const BODY_PARTS = ref<{
    content: string;
    nature_text?: string;
    action?: string;
    icon?: string;
    style?: any;
}[]>([]);
const search = ref({
    vip_id: 0,
    game: 'LOVERS_DICE'
});
const clickAudioContext = createAudio('click');
const musicAudioContext = createAudio('music');
onLoad((options: any) => {
    $page.title();
    if (options.id === 'custom') {
        const gameCustom = useGameCustom(search.value.game);
        gameCustom.get().then((data: any) => {
            BODY_ACTION.value = data.BODY_ACTION;
            BODY_PARTS.value = data.BODY_PARTS;
        }).catch((err: any) => {
            uni.showModal({
                title: '提示',
                content: err.msg,
                showCancel: false,
                confirmText: '返回',
                success: (res: any) => {
                    close();
                }
            })
        })
    } else {
        search.value.vip_id = options.id;
        getQuestionList();
    }
})
onUnload(() => {
    clickAudioContext.destroy();
})
const stopMusic = (status:boolean) => {
    if(status){
        musicAudioContext.stop();
    }
}
const getQuestionList = () => {
    $http.get('Question/list', {
        data: search.value
    })
        .then((res: any) => {
            if (res.code === $http.ResponseCode.SUCCESS) {
                game.value.theme=res.data.game.theme
                game.value.bg=res.data.game.bg
                if (res.data.game.rule_content) {
                    game.value.rule_content = res.data.game.rule_content;
                }
                BODY_ACTION.value = res.data.list.filter((item: any) => item.action == 'BODY_ACTION').splice(0, 6);
                BODY_PARTS.value = res.data.list.filter((item: any) => item.action == 'BODY_PARTS').splice(0, 6);
            } else {
                uni.showModal({
                    title: '提示',
                    content: res.msg,
                    showCancel: false,
                    confirmText: '返回',
                    success: (res: any) => {
                        close();
                    }
                })
            }
        }).catch((err: any) => {
        })
}
const actionNum = ref<number>(0);
const partsNum = ref<number>(0);
const diceRounding = ref<boolean>(false);
const getRounded = () => {
    if (diceRounding.value) {
        return;
    }
    diceRounding.value = true;

    actionNum.value = Math.floor(Math.random() * 6 + 1);
    partsNum.value = Math.floor(Math.random() * 6 + 1);
    musicAudioContext.play();
    setTimeout(() => {
        musicAudioContext.rest();
        diceRounding.value = false;
    }, 6000)
}
const close = (confirm?: boolean) => {
    if (confirm) {
        uni.showModal({
            title: '提示',
            content: '确定要结束游戏吗？',
            success: (res: any) => {
                if (res.confirm) {
                    close();
                }
            }
        })
        return;
    }
    $page.switch('/pages/index/index');
}
const palyClickAudio = () => {
    clickAudioContext.restPlay();
}
</script>

<style lang="scss" scoped>
.content {
    --content-bg: linear-gradient(180deg, #fdcbf1, #e6dee9);
    --item-bg-1: #df89b5;
    --item-bg-2: #bfd9fe;
    --rule-color: #df89b5;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: var(--content-bg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    backdrop-filter: blur(10px);
    position: relative;

    &-page-black {
        --content-bg: linear-gradient(180deg, #0c1014, #121c29);
        --item-bg-1: #27282d;
        --item-bg-2: #2e3035;
        --rule-color: var(--xl-white);
    }

    &-page-purple {
        --content-bg: linear-gradient(180deg, #4a4c92, #363455);
        --item-bg-1: #817fa4;
        --item-bg-2: #918fb3;
        --rule-color: var(--xl-white);
    }

    &-page-cyan {
        --content-bg: linear-gradient(180deg, #022227, #325b5d);
        --item-bg-1: #7a9ba0;
        --item-bg-2: #7d9ea3;
        --rule-color: var(--xl-white);
    }

    &-page-silvery {
        --content-bg: linear-gradient(180deg, #acb6bf, #506382);
        --item-bg-1: #c4cbd5;
        --item-bg-2: #a2a8b2;
        --rule-color: var(--xl-white);
    }
}

.dice-position {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.rule-position {
    width: 70%;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--item-bg-1), var(--item-bg-2));
    padding: 20px;
    color: var(--rule-color);
}

.btn-position {
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
}

.dice {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: rotate0 6s infinite;
}

.box {
    width: 100px;
    height: 100px;
    opacity: 1;
    position: absolute;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    color: #000;
    border: .15rem solid #bfd9fe
}


.action-0 {
    background-image: linear-gradient(0deg, #fad0c4 0, #fad0c4 1%, #ffd1ff);
    transform: rotateY(0deg) translateZ(50px)
}

.action-1 {
    background-image: linear-gradient(0deg, #ff9a9e 0, #fecfef 99%, #fecfef);
    transform: rotateY(90deg) translateZ(50px)
}

.action-2 {
    background-image: linear-gradient(0deg, #fad0c4 0, #fad0c4 1%, #ffd1ff);
    transform: rotateY(180deg) translateZ(50px)
}

.action-3 {
    background-image: linear-gradient(0deg, #ff9a9e 0, #fecfef 99%, #fecfef);
    transform: rotateY(-90deg) translateZ(50px)
}

.action-4 {
    transform: rotateX(90deg) translateZ(50px)
}

.action-4,
.action-5 {
    background-image: linear-gradient(0deg, #fdcbf1 0, #fdcbf1 1%, #e6dee9)
}

.action-5 {
    transform: rotateX(-90deg) translateZ(50px)
}

.parts-0 {
    background-image: linear-gradient(0deg, #fbc2eb 0, #a6c1ee);
    transform: rotateY(0deg) translateZ(50px)
}

.parts-1 {
    background-image: linear-gradient(0deg, #e0c3fc 0, #8ec5fc);
    transform: rotateY(90deg) translateZ(50px)
}

.parts-2 {
    background-image: linear-gradient(0deg, #fbc2eb 0, #a6c1ee);
    transform: rotateY(180deg) translateZ(50px)
}

.parts-3 {
    background-image: linear-gradient(0deg, #e0c3fc 0, #8ec5fc);
    transform: rotateY(-90deg) translateZ(50px)
}

.parts-4 {
    transform: rotateX(90deg) translateZ(50px)
}

.parts-4,
.parts-5 {
    background-image: linear-gradient(0deg, #a8edea 0, #fed6e3)
}

.parts-5 {
    transform: rotateX(-90deg) translateZ(50px)
}

.rotate-1 {
    animation: rotate1 6s ease 1;
    animation-fill-mode: forwards
}

.rotate-2 {
    animation: rotate2 6s ease 1;
    animation-fill-mode: forwards
}

.rotate-3 {
    animation: rotate3 6s ease 1;
    animation-fill-mode: forwards
}

.rotate-4 {
    animation: rotate4 6s ease 1;
    animation-fill-mode: forwards
}

.rotate-5 {
    animation: rotate5 6s ease 1;
    animation-fill-mode: forwards
}

.rotate-6 {
    animation: rotate6 6s ease 1;
    animation-fill-mode: forwards
}


@keyframes rotate0 {
    0% {
        transform: rotateX(0) rotate(0)
    }

    to {
        transform: rotateY(4turn) rotate(4turn) rotateX(1turn)
    }
}

@keyframes rotate1 {
    0% {
        transform: rotateX(0) rotate(0)
    }

    to {
        transform: rotateY(4turn) rotate(4turn) rotateX(1turn)
    }
}

@keyframes rotate2 {
    0% {
        transform: rotateX(0) rotate(0)
    }

    to {
        transform: rotateY(1350deg) rotate(4turn) rotateX(1turn)
    }
}

@keyframes rotate3 {
    0% {
        transform: rotateX(0) rotate(0)
    }

    to {
        transform: rotateY(1260deg) rotate(4turn) rotateX(1turn)
    }
}

@keyframes rotate4 {
    0% {
        transform: rotateX(0) rotate(0)
    }

    to {
        transform: rotateY(1530deg) rotate(4turn) rotateX(1turn)
    }
}

@keyframes rotate5 {
    0% {
        transform: rotateX(0) rotate(0)
    }

    to {
        transform: rotateX(1350deg) rotate(4turn) rotateY(1turn)
    }
}

@keyframes rotate6 {
    0% {
        transform: rotateX(0) rotate(0)
    }

    to {
        transform: rotateX(1530deg) rotate(4turn) rotateY(1turn)
    }
}
</style>
